<template>
  <div class="c-loading-box">
    <div class="container">
      <div class="loading">
        <div class="petal"
        v-for="n in 12"
        :class="'petal' + (n+1)"
        :style="
        '-webkit-transform:rotate('+(30*n)+'deg) translate3d(0,-0.6rem,0);
        -webkit-animation-delay:' +(n*0.05)+ 's'"></div>
      </div>
      <div class="text" v-show="msg">
        <span>{{msg}}</span>
      </div>
    </div>
  </div>
</template>

<script>
  module.exports = {
    props: {
      'msg': {
        type: String,
        default: '正在加载..'
      }
    }
  }

</script>
<style lang="stylus">
  @import '../assets/style/common'

  .c-loading-box
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    background rgba(0,0,0,0.8)
    .container
      width 70%
      height auto
      min-height 4rem
      border-radius 0.2rem
      position absolute
      top 40%
      left 50%
      transform translate3d(-50%, -50%, 0)
      .loading
        width 4rem
        height 4rem
        margin 0 auto
        position relative
        .petal
          width 0.11rem
          height 0.34rem
          background rgba(255,255,255,0)
          position absolute
          top 1.9rem
          left 2rem
          border-radius 0.2rem
          transform-origin 50% 50%
          animation bouncedelay 0.6s infinite ease-in-out
      .text
        color #fff
        text-align center
        padding 0 0.5rem 0.5rem
        font-size 0.4rem

  @keyframes bouncedelay {
    0%, 80%, 100% {
      background rgba(255,255,255,0.2)
    } 40% {
      background rgba(255,255,255,0.8)
    }
  }

</style>
